<template>
    <view class="box">
        <view class="list">
            <view
                v-for="(item, index) in data"
                :key="index"
                :data-index="index"
                @click="callback(index)"
            >
                {{ item.text }}
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { defineEmits } from 'vue'
const emits = defineEmits(['select'])
const props = defineProps(['data'])
const callback = (index: number) => {
    emits('select', props.data[index])
}
</script>

<style lang="scss" scoped>
.box {
    font-size: 28rpx;
    line-height: 80rpx;
    position: relative;
    width: 100%;
    z-index: 20;
    top: 20rpx;
}

.list {
    position: absolute;
    width: 100%;
    max-height: 60vw;
    overflow: auto;
    top: 0;
    right: 0;
    z-index: 1000;
    background: #fafafc;
    border-radius: 16rpx;

    view {
        padding: 3vw 8vw;
        line-height: 40rpx;
        &:hover {
            background: #e9eef9;
            color: $uni-color-success;
        }
    }
}
</style>
